<script>
  import defaultConfig from '__CONFIG__/base-config.js'
  import { timeStrToDate, dateTotoLocaleDateStr} from '__CORE__/filters/date.js'
  export default {
    name: 'MiNiArticle',
    props: ['articleInfo'],
    functional: true,
    //渲染函数
    render(createElement, context) {
      const { articleInfo } = context.props
      const create_time = dateTotoLocaleDateStr(timeStrToDate(articleInfo.create_time)) 
      const { ARTICLE_COVER, AVATAR_URL } = defaultConfig
      return (
        <router-link tag="div" class="mini-article" to={{name: 'ArticleDisplay', 
          params: { articleId: articleInfo.id }}}
        >
          <div class="one-side">
            <div class="article-cover" style={{backgroundImage: `url(${articleInfo.cover_url || ARTICLE_COVER})`}}></div>
          </div>
          <div class="other-side">
            <div class="main-tag">
              {articleInfo.functionality_model.name}
            </div>
            <h3 class="article-headline">
              {articleInfo.headline}
            </h3>
            <div class="article-outline">
              {articleInfo.outline}
            </div>
            <div class="author flex">
              <router-link tag="div" class="author-portrait" 
                style={{backgroundImage: `url(${articleInfo.user_model.avatar_url || AVATAR_URL})`}}
                to={{name: 'PreviewUser', query:{vertify: articleInfo.user_model.nickname}}}
              ></router-link>
              <div class="author-att">
                <div class="author-name">{articleInfo.user_model.nickname}</div>
                <div class="article-create-time">{create_time}</div>
              </div>
            </div>
          </div>
        </router-link>
      )
    }
  }
</script>

<style lang="less">
  @import url('./mini_article.less');
</style>